// import echarts from "echarts";
// import * as echarts from "echarts/core";
// 按需引入方式
import echarts from "@/views/package/echarts/components/BaseEcharts/utils/echarts";
export function getBarOptions() {

  const itemStyle = {
    normal: {
      label: {
        formatter: "{c}",
        show: true,
        position: "top",
        textStyle: {
          fontWeight: "bolder",
          fontSize: "12",
          color: "#000",
        },
      },
      color: (param) => {
        // console.log("color param", param);
        const color = param.data[3];
        return color ? color : "#000";
      },
      opacity: 1,
    },
  };

  const option = {
    tooltip: {},
    xAxis: {
      type: "category",
    },

    yAxis: {
      type: "value",
    },

    series: [
      {
        type: "custom",
        renderItem: function (params, api) {
          // 对于 data 中的每个 dataItem，都会调用这个 renderItem 函数。
          // （但是注意，并不一定是按照 data 的顺序调用）
          // 这里进行一些处理，例如，坐标转换。
          // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
          var categoryIndex = api.value(1);
          // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
          var startPoint = api.coord([api.value(0), categoryIndex]);
          var endPoint = api.coord([api.value(1), categoryIndex]);
          // 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。
          var height = api.size([0, 1])[1] * categoryIndex;
          const width = api.value(2);
          const y = endPoint[1];
          const x = startPoint[0] - width / 2;
          // 这里返回为这个 dataItem 构建的图形元素定义。
          return {
            // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
            type: "rect",
            // shape 属性描述了这个矩形的像素位置和大小。
            // 其中特殊得用到了 echarts.graphic.clipRectByRect，意思是，
            // 如果矩形超出了当前坐标系的包围盒，则剪裁这个矩形。

            shape: echarts.graphic.clipRectByRect(
              {
                // 矩形的位置和大小。
                x: x,
                y: y,
                height: height,
                width: width,
              },
              {
                // 当前坐标系的包围盒。
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height,
              }
            ),
            // 用 api.style(...) 得到默认的样式设置。这个样式设置包含了
            // option 中 itemStyle 的配置和视觉映射得到的颜色。
            style: api.style(),
          };
        },
        encode: {
          x: 0, // data 中『维度0』对应到 X 轴
          y: 1, // data 中『维度1』对应到 Y 轴
        },
        itemStyle,
        data: [
          // ['名称','数值','宽度','颜色']
          ["name1", 100, 10, "rgb(255,0,0)"],
          // ["name2", 200, 20, "rgb(0,255,0)"],
          // ["name3", 300, 30, "rgb(0,0,255)"],
        ],
      },
      {
        type: "custom",
        renderItem: function (params, api) {
          // 对于 data 中的每个 dataItem，都会调用这个 renderItem 函数。
          // （但是注意，并不一定是按照 data 的顺序调用）
          // 这里进行一些处理，例如，坐标转换。
          // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
          var categoryIndex = api.value(1);
          // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
          var startPoint = api.coord([api.value(0), categoryIndex]);
          var endPoint = api.coord([api.value(1), categoryIndex]);
          // 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。
          var height = api.size([0, 1])[1] * categoryIndex;
          const width = api.value(2);
          const y = endPoint[1];
          const x = startPoint[0] - width / 2;
          // 这里返回为这个 dataItem 构建的图形元素定义。
          return {
            // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
            type: "rect",
            // shape 属性描述了这个矩形的像素位置和大小。
            // 其中特殊得用到了 echarts.graphic.clipRectByRect，意思是，
            // 如果矩形超出了当前坐标系的包围盒，则剪裁这个矩形。

            shape: echarts.graphic.clipRectByRect(
              {
                // 矩形的位置和大小。
                x: x,
                y: y,
                height: height,
                width: width,
              },
              {
                // 当前坐标系的包围盒。
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height,
              }
            ),
            // 用 api.style(...) 得到默认的样式设置。这个样式设置包含了
            // option 中 itemStyle 的配置和视觉映射得到的颜色。
            style: api.style(),
          };
        },
        encode: {
          x: 0, // data 中『维度0』对应到 X 轴
          y: 1, // data 中『维度1』对应到 Y 轴
        },
        itemStyle,
        data: [
          // ['名称','数值','宽度','颜色']
          // ["name1", 100, 10, "rgb(255,0,0)"],
          ["name2", 200, 20, "rgb(0,255,0)"],
          // ["name3", 300, 30, "rgb(0,0,255)"],
        ],
      },
    ],
  };

  return option;
}
